/* @import 'http://battlelog.battlefield.com/cdnprefix/local/public/base/fonts/purista/purista.css'; */


progress {
	width: 65px;
	height: 8px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	border: solid #fff 0px;
}

/* Polyfill */
progress[role]:after {
	background-image: none;
}

/*
 * Background of the progress bar background
 */

/* Firefox and Polyfill */
progress {
	background-color: rgba(255, 255, 255, 0.3) !important; /* !important only needed in polyfill */
	
}

/* Chrome */
progress::-webkit-progress-bar {
	background-color: rgba(255, 255, 255, 0.3);
}

/*
 * Background of the progress bar value
 */

/* Firefox */
progress::-moz-progress-bar {
background: #ff9900;

}

/* Chrome */
progress::-webkit-progress-value {
background: #ff9900;

}

/* Polyfill */
progress[aria-valuenow]:before {
background: #ff9900;

}



#numbers{
float: left; 
width: 40px; 
margin-top: 25px; 
line-height: 50px;
}

body{
background: #000; /* Old browsers */
background-image: url(../img/bg2.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
font-family: Purista,sans-serif, arial;
font-size: 8pt;
}

#portrait, #portraitLinks{
display: none;
z-index: -799;
position: fixed;
bottom: 0px;
}

.portraitRechts{
right: 0px;

}
.portraitLinks{
left: 0px;
}

@media (min-width: 1520px) and (min-height: 430px) {
#portrait, #portraitLinks{
display: block;
}

}
@media (max-width: 1384px) {
#background-video{
display:none;
}}

#reload{
border: 1px solid #ff9900;
font-size: 40px; 
color: #ff9900;
width: 60px;
height: 60px;
line-height: 60px;
padding: 0px;
left: 50%;
margin-left: -30px;
text-align: center;
cursor:pointer;
vertical-align: middle;
clear: both;

}
#reloadText{
width: 40px;

font-family:arial;

}
#reload:hover{
border: 1px solid #fff;
color: #fff;


}



    #reloadText:hover {
/*	    -webkit-animation: cssAnimation 1.0189s 1 ease;
    -moz-animation: cssAnimation 1.0189s 1 ease;
    -o-animation: cssAnimation 1.0189s 1 ease; */
    }
    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -webkit-transform: rotate(-360deg) scale(1) skew(0deg) translate(0px); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -moz-transform: rotate(-360deg) scale(1) skew(0deg) translate(0px); }
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { -o-transform: rotate(-360deg) scale(1) skew(0deg) translate(0px); }
    }



#ladezeit{
position: fixed;
color: grey;
bottom: 0px;
left: 0px;
content: "T9C5F";
}

img.rank{
width: 50px;
height: 50px;
}

p.rank{
display: none;
}

.echterName{

}
.nick{
color: #ff9900;
}
#turnier{

}

#TS{
position: relative;
left: 50%;
margin-left: -64px;
margin-bottom: 20px;
}

.innerDiv{
background-color: rgba(255, 255, 255, 0.3);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center bottom;


height: auto;
text-align: center;
margin: 10px;
padding: 5px 5px 5px 5px;
width: 30%;
float:left;
}

img.maps{
width: 100%;
}
h3,h2,h1{
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
font-size: 200%;
clear:both;
}

table.serverBrowser tr:nth-child(odd) td {
background-color: rgba(255, 255, 255, 0.05);
color: white;
} /*odd*/
table.serverBrowser tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.1);
color: white;
} /* even*/
table.serverBrowser tr:hover td {
    background-color: rgba(255, 255, 255, 0.3);
	color: white !important;
}
.serverBrowser{
width: 100%;
}
.mapThumb{
width: 146px;
height: 79px;
position: relative;
}
.mapPlayUnderlay{
width: 146px;
height: 79px;
position: relative;
background-image: url(../thumbs/play.png);
}
.playerCount{
text-align: center;
font-size: 80%;
padding: 20px;
width: 50px;
}
.hardcore{
width: 50px;
text-align: center;
}
.serverInfo{
padding: 0px 0px 0px 20px;
line-height: 0%;
}
p.serverName{
font-size: 100%;
}
p.serverMode{
font-size: 90%;
text-indent: 30px;
transform: translateY(-20%);
}
img.expansionPack{
transform: translateY(20%);
}

p.serverDiscr1{
font-size: 80%;
margin-bottom: -10px;
margin-left: 30px;
display: none;
}

tr.server:hover .mapThumb{
opacity: .3; filter:Alpha(Opacity=30);
z-index: 999;
cursor:pointer;
}
tr.server:hover p.serverDiscr1{
display: block;
}
tr.server:hover p.serverName{
display: block;
}
tr.server:hover .serverMode{
transform: translateY(30%);
}

.button{
box-sizing: border-box;
color: #ff9900;
border: 1px solid #ff9900;
background-color: transparent;
background-image: -webkit-linear-gradient(top, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.3) 100%);
background-image: linear-gradient(to bottom, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.3) 100%);

display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
text-align: center;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
height: 30px;
line-height: 30px;
font-size: 12px;
padding: 0 25px;
vertical-align: middle;
cursor:pointer;
outline: none;
font-family: Purista, sans-serif;
font-style: normal !important;
font-weight: 400;
}
#welcome, #bye{
position: absolute;
left: 50%;
text-align: center;
}
#welcome{
width: auto;
top: 20px;
margin-left: 250px;
}
#bye{
width: 200px;
top: 250px;
margin-left: -100px;
}

#redirector{
position: absolute;
left: 50%;
text-align: center;
width: 500px;
height: 200px;
top: 250px;
margin-left: -250px;
background-color: transparent;
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.expansionPacks{
}

#friends{
height: 90%;
width: 100%;
}

@font-face { font-family: 'Purista'; src: url('../fonts/PuristaMedium.woff') format('woff'); }

#comcenterText{
margin-left: 15px;
height: auto;
font-size: 14px;
font-family: Purista;
color: #d5dde5;
text-transform: uppercase;
}

#showOffline, #hideOffline{
margin-left: 15px;
height: auto;
font-size: 14px;
font-family: Purista;
color: #d5dde5;
text-transform: uppercase;
cursor:pointer;
}
#hideOffline{
display: none;
}
#offlineFriends{

}


.friendContainer{
position: relative;
color: white;
font-size: 100%;
background-color: rgba(255, 255, 255, 0.15);
}
.friendContainerOffline{
background-color: rgba(255, 255, 255, 0.05);
}

.friendContainer:hover{
background-color: rgba(255, 255, 255, 0.3);
}
.friendContainer:hover .chatbutton{
display: block;
}
.friend{
color: white !important;
}
#friendList{
overflow: auto;
height: 100%;
}

.profilePic{
float:left; 
margin-right:10px;
}
.friendName, .friendNameOffline{
line-height:36px;
margin: 2px;
}
.friendName{
font-size: 120%;
cursor:pointer;
}
.friendName:hover{
text-decoration: underline;
}
.friendNameInGame{
line-height:21px;
}

.friendNameOffline{
font-size: 100%;
color: #d5dde5;
cursor:pointer;
}
.friendNameOffline:hover{
text-decoration: underline;
}

#friendlist::-webkit-scrollbar {
    width: 12px;
}
 
#friendlist::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.2);
}
 
#friendlist::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
}

.onlineBox{
background-color: #44b335;
width: 4px;
height: 36px;
float: left;
}
.inGameBox{
background-color: #1E90FF;
width: 4px;
height: 36px;
float: left;
}

.chatButton{
background: transparent url(../img/icons-interact.png) no-repeat;
margin-right: 4px;
margin-top: 4px;
background-position: -23px -96px;
position: relative;
vertical-align: middle;
height: 24px;
width: 23px;
float: right;
border: 0;
cursor:pointer;
display:none;
}
.chatButton:hover{
background-position: 0px -96px;
}
.joinButton{
box-sizing: border-box;
color: #ff9900;
border: 1px solid #ff9900;
background-color: transparent;
background-image: -webkit-linear-gradient(top, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.3) 100%);
background-image: linear-gradient(to bottom, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.3) 100%);

height: 26px;
width: 26px;
margin-top: 5px;
margin-right: 5px;
color: #ff9900;
position: relative;
float: right;
padding-left: 8px;
cursor:pointer;
line-height: 26px;

}

.inGameServer{
color: grey;
margin: 0px;
}


a:link { text-decoration:none;  color:#ff9900; }
a:visited { text-decoration:none;  color:#ff9900; }
a:hover { text-decoration:none;  background-color:#ccc; }
a:active { text-decoration:none; background-color:#ff9900; }
a:focus { text-decoration:none; background-color:#ff9900; }

.registerText{
color: white;
font-size: 80%;
}

#lang{
position: fixed;
top: 0px;
left: 10px;
}

table.soldierStats{
width: 100%;
table-layout:fixed;
text-align: center;

}

table.soldierStats td {
background-color: rgba(255, 255, 255, 0.05);
color: white;
padding: 20px;
}
table.soldierStats td:hover{
    background-color: rgba(255, 255, 255, 0.02);
	color: white !important;
}

table.soldierStats  th {
background-color: rgba(0, 0, 0, 0.3);
color: white;
text-align: left;
font-weight: normal;
text-transform: uppercase;
}
table.soldierStats th:hover {
    background-color: rgba(0, 0, 0, 0.4);
	color: white !important;
}

table.soldierStatsInner{
width: 100%;
height: 100%;
text-align: center;
padding: 0px;
}



table.soldierStatsInner td {
background-color: rgba(255, 255, 255, 0.00);
color: white;
padding: 5px;
vertical-align: middle;
width: 33%;
}

table.soldierStatsInner td:hover{
    background-color: rgba(255, 255, 255, 0.1);
	color: white !important;
}
table.soldierStatsDetailsInner td{
    padding: 5px;
}
table.soldierStatsDetailsInner tr:hover td{
    background-color: rgba(255, 255, 255, 0.1);
	color: white !important;
}

table.soldierStatsDetailsInner{
width: 100%;
height: 100%;
text-align: left;
padding: 0px;
font-size: 80%;
}

table.soldierStatsDetailsInner .detailNames{
font-size: 110%;
text-align: left;
}

table.soldierStatsDetailsInner td{
font-size: 130%;
text-align: right;
height: 50%;
}

#soldierStatsTopWeapons{
height: 100%;
background-color: rgba(255, 255, 255, 0.0);
border-spacing: 0px;
border-collapse: separate;
}

#soldierStatsTopWeapons td{
padding: 10px;
width: 50%;
background-color: rgba(0, 0, 0, 0.0);
border: 1px solid rgba(0, 0, 0, 0.2);
text-align: right;
vertical-align: middle;
}

.weaponName{
font-size: 100%;
}
.weaponKills{
font-size: 80%;
}

p.weaponNameBig{
margin: 0px;
}

p.weaponName{
margin: 0px;
margin-top: 0px;
}

.weaponImage{
width: 50px;
float:left;
}
.weaponImageBig{
width: 139px;
}
img.weaponImageBig{
width: 139px;
height: 84px;
}
img.weaponImage{
width: 50px;
height: 30px;
}

.topDetailsHover{
font-size: 60%;
visibility: hidden;
}

.weaponImage:hover .topDetailsHover {
font-size: 100%;
visibility: visible;

}
.weaponImage:hover .weaponImage{
width: 125px;
height: 75px;
}


#soldierStatsHeadline{
color: #f7da8d;
font-size: 300%;
margin: 10px 0px 0px 0px;
}
#soldierStatsHeadlineRealName{
color: white;
font-size: 60%;
}

#soldierStatsHeadGravatar{
position: absolute;
top: 45px;
left: 12px;
}
#soldierStatsHeadPremium{
margin: 4px 3px 0 0;
}

#soldierStatsHeadBox{
margin-left: 70px;
height: 70px;
}

#soldierStatsHeadGame{
background: url('../img/soldierInfo/game_icons_venice.png') no-repeat -32px -20px;
float: left;
width: 15px;
height: 11px;
margin: 6px 3px 0 0;
}

#soldierStatsHeadPlatform{
background: url('../img/soldierInfo/game_icons_venice.png') no-repeat -32px -32px;
float: left;
width: 15px;
height: 7px;
margin: 8px 3px 0 0;
}


.statsDetailsName{
color: white;
font-size: 90%;
text-transform: uppercase;
}
.statsDetailsValue{
color: white;
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.53);
font-size: 160%;
}

.statsDetailsValueSmall{
color: white;
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.53);
font-size: 100%;
}
.skillValue{
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.53);
font-size: 400%;
margin-top: 0px;
margin-bottom: 0px;
}
#skillBar{
position: relative;
width: 150px;
height: 8px;
margin: 0 auto 10px;
border: 1px solid #fff;
background-color: rgba(0, 0, 0, 0.6);
}
#skillBar-Inner{
position: absolute;
height: 8px;
background-color: #fff;
width: 8px;
}






.progressInfo{
text-align: right;
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.53);
font-size: 60%;
float: right;
margin-top: 0px;
}
.progressName{
color: white;
margin-top: 0px;
text-align: left;
font-size: 80%;
float: left;
}


.progressBar{
background-color: #0f1214;
background-size: 3px 3px,1px 100%;
white-space: nowrap;
margin-bottom: 10px;
border: 1px solid #939596;
width: 100%;
height: 14px;
margin-top: 5px;
}
.progressBarInner{
background: -webkit-linear-gradient(left,#bd620d,rgba(189,98,13,0));
background: linear-gradient(to right,#bd620d,rgba(189,98,13,0));
background-color: #eba115;
box-shadow: 0 0 0.2em 1px #eba115 inset;
width: 0%;
height: 14px;
font-size: 80%;
color: white;
text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
}




.ribbons{
float: left;
width: 75px;
height: 28px;
margin: 12px;
}
.ribbons:hover{
box-shadow: 0px 0px 2px 2px #888;
}

.medals{
float: left;
width: 52px;
height: 52px;
margin: 14px 8px 14px 8px;
background-color: rgba(0, 0, 0, 0.2);
}

.medals:hover{
box-shadow: 0px 0px 2px 2px #888;
}

.numAwardsTaken{
background-color: #000;
color: #fff;
float: right;
font-size: 11px;
}
.ribbonTransparent{
opacity: 0.1;
}
.ribbonTransparent:hover{
opacity: 1;
}
.medalBar{
height: 5px;
margin: 0px;
}
.medalBarInner{
height: 5px;
}
#tooltip{
display: none;
position: absolute;
width: 300px;
padding: 5px;
box-shadow: 0 8px 6px -6px black;
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
z-index: 999;
color: white;
font-size: 150%;
}
.awardCount{
color: #bce8f1;
text-shadow: 0 0 4px #27a2ba;
font-size: 200%;
margin: 5px;
}

.shoutboxName{
color: #d5dde5;
font-size: 80%;
text-align: right;
}
.shoutBoxMessage{
font-size: 80%;
color: white;
text-align: left;
}
.ownMessage{
color: #f7da8d;
}

.shoutbox{
width: 100%;
table-layout:auto;
}
#message{
background-color: rgba(0, 0, 0, 0.3);
padding: 5px;
color: white;
border: 0px solid #ff9900;
}

li.navPage{
float: left;
border-right: 1px solid #d5dde5;
position: relative;
list-style: none;
}
li.navPage.lastNavPage{
border-right: 0px solid #d5dde5;
}
li.navPage.active{
background-color: rgba(255, 255, 255, 0.2);
}
a.navText{
position: relative;
display: block;
color: #d5dde5;
font-size: 16px;
height: 47px;
line-height: 47px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
font-family: Purista, sans-serif;
font-style: normal;
font-weight: 400;
}
a.navText:hover{
background-color: rgba(0, 0, 0, 0.3);
}

.toggleStatDetailsButton{
font-size: 100%;
}
.statDetailsRow{
padding: 0px !important;
text-align: left;
}

.minimizeButton{

float:left;
display: inline-block;
width: 12px;
height: 12px;
background-position: 0px -24px;
background-image: url("../img/row_icon_collapse_expand.png");
background-color: rgba(255,255,255,0.5);
border-radius: 5px;
margin: 5px 10px 5px 5px;
}

table.leaderBoardTop{
width: 100%;
color:white;
}
td.leaderBoardHead{
font-size: 110%;
}
td.leaderboardPic{
width: 60px;
height: 60px;
}

.miscPic16{
background-image: url(../img/allmisc16.png);
width: 16px;
height: 16px;
float:left;
margin: 5px;
}
.assaultPic{
background-position: -2px -38px;
}
.engineerPic{
background-position: -2px -56px;
}
.supportPic{
background-position: -2px -326px;
}
.reconPic{
background-position: -2px -308px;
}
.jetPic{
background-position: -2px -416px;
}
.heliPic{
background-position: -2px -362px;
}
.ifvPic{
background-position: -2px -380px;
}
.tankPic{
background-position: -2px -400px;
}
tr.leaderBoardSpm{
font-size: 80%;
}
tr.leaderBoardName, tr.leaderBoardValue {
font-size: 80%;
}
tr.leaderBoardName{
color: #f7da8d;
}
td.leaderBoardName{
color: #f7da8d;
cursor: pointer;
}
td.leaderBoardName:hover{
text-decoration: underline;
}
#game-manager{
background-image: linear-gradient(to bottom, rgba(47, 132, 177, 0.95) 0%, rgba(47, 132, 177, 0.98) 100%);
bottom: -50px;
left: 0;
right: 0;
position: fixed;
z-index: 2001;
color: white;

font-family: Purista, sans-serif;
min-width: 1024px;
height: 50px;
overflow: hidden;
display: block;
}
#game-manager-text{
font-size: 200%;
margin-left: 20%;
margin-top: 12px;
float:left;
vertical-align: top;
line-height: 30px;
}


table.tablesorter {
	font-family:arial;
	font-size: 8pt;
	width: 100%;
	text-align: center;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: rgba(255, 255, 255, 0.0);
	color:white;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor:pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: middle;
}
table.tablesorter tr:nth-child(odd) td {
background-color: rgba(255, 255, 255, 0.05);
color: white;
} /*odd*/
table.tablesorter tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.1);
color: white;
} /* even*/
table.tablesorter tr:hover td {
    background-color: rgba(255, 255, 255, 0.3);
	color: white !important;
}


table.tablesorter thead tr .tablesorter-headerAsc  {
	background-image: url(../img/tableSort/dropbox-asc.png);
	background-repeat: no-repeat;
	background-repeat: no-repeat;
	background-position: 5px 5px; 
}
table.tablesorter thead tr .tablesorter-headerDesc  {
	background-image: url(../img/tableSort/dropbox-desc.png);
	background-repeat: no-repeat;
	background-position: 5px 5px; 
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
border: 1px solid #ff9900;
background-color: rgba(255, 255, 255, 0.0);
color: #ff9900;
}